<template>
  <!--购物车-->
  <div class="gouwuche">
    <ul v-if="goodsList.length<=0" class="null_content">
      <li><img src="../../assets/null.png" alt="" width="155"></li>
      <li>这里空空如也</li>
    </ul>
    <ul>
      <li class="gouwulist" v-for="(item,index) in goodsList">
        <leftSlider @msg-from-child="deleteFromShoppingCart(index,item.shoppingcartId)">
          <div>
            <p class="checkbox-custom" @click="changeCheckboxValue(index,item.isChecked)">
              <input type="checkbox" :checked="item.isChecked"> <label></label>
            </p>
            <wv-panel class="msg">
              <wv-media-box
                :thumb="item.coverImg | imgPathFilter"
                :title="item.goodsName"
                :description="item.unitPrice+'元'"
              />
            </wv-panel>
            <wv-number-spinner v-model="item.goodsNum" :min="1" input-width="2em" @change="onChange(item.goodsId,item.goodsNum)"></wv-number-spinner>
          </div>
        </leftSlider>
      </li>
    </ul>
    <ul class="bottom">
      <li>
        <p class="checkbox-custom" @click="changeAllChecked(allChecked)">
          <input type="checkbox" :checked="allChecked">
          <label>全选</label>
        </p>
      </li>
      <li>总计 <span>{{totalMoney}}元</span></li>
      <li>
        <span>
          <wv-button type="default" :plain="true" @click="goTijiaogouwuchedingdan()">立即购买</wv-button>
        </span>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import leftSlider from '../offertemplate/delete'
  import {getShoppingcartGoodsList, updateMyShoppingcart, deleteFromMyshoppingcart} from '../../../test/unit/http'
  import {Toast} from 'we-vue'
  export default {
    name: 'gouwuche',
    props: {},
    data() {
      return {
        goodsList: [],
        allChecked: false
      };
    },
    methods: {
      changeCheckboxValue(index, isChecked){
        var goodsList = this.goodsList;
        goodsList[index].isChecked = !isChecked;
        for (let key in goodsList) {
          var goods = goodsList[key];
          if (goods.isChecked == false) {
            this.allChecked = false;
            return;
          }
          this.allChecked = true;
        }
      },
      changeAllChecked(allChecked){
        this.allChecked = !allChecked;
        var goodsList = this.goodsList;
        if (this.allChecked) {
          for (let key in goodsList) {
            goodsList[key]['isChecked'] = true;
          }
        } else {
          for (let key in goodsList) {
            goodsList[key]['isChecked'] = false;
          }
        }
      },
      deleteFromShoppingCart (index, shoppingcartId) {
        let params = {shoppingcartId: shoppingcartId};
        deleteFromMyshoppingcart(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.goodsList.splice(index, 1);
          }
        })
      },
      onChange(goodsId, goodsNum){
        let params = {goodsId: goodsId, goodsNum: goodsNum};
        updateMyShoppingcart(params).then(res => {
          console.log(res);
        })
      },
      goTijiaogouwuchedingdan(){
        var goodsList = this.goodsList;
        var subGoodsList = [];
        for (let key in goodsList) {
          if (goodsList[key].isChecked) {
            var goods = goodsList[key];
            var categoryCode=goods.categoryCode;
            goods['orderType']=1;
            if(categoryCode=='viproom'){
                if(goods.isAppoint==2){
                  goods['orderType']=2;
                }
            }
            if(categoryCode=='viponly'){
              if(goods.isAppoint==2){
                goods['orderType']=2;
              }
            }
            subGoodsList.push(goodsList[key])
          }
        }
        this.$router.push({path: 'tijiaogouwuchedingdan', query: {'subGoodsList': JSON.stringify(subGoodsList)}});
        console.log(subGoodsList)
      }
    },
    created() {
      getShoppingcartGoodsList({}).then(res => {
        console.log(res);
        if (res.code == 100) {
          var goodsList = res.object.goodsList;
          for (let key in goodsList) {
            goodsList[key]['isChecked'] = false;
          }
          this.goodsList = goodsList;
        }
      })
    },
    computed: {
      totalMoney: function () {
        var totalMoney = 0;
        var goodsList = this.goodsList;
        for (let key in goodsList) {
          var goods = goodsList[key];
          if (goods.isChecked) {
            totalMoney += goods.goodsNum * goods.unitPrice;
          }
        }
        return totalMoney;
      }
    },
    components: {
      leftSlider
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .null_content{
    padding-top:50%;
    li:nth-child(2){
      margin: 10px 0 20px;
      color: #bababa;
      font-size: 14px;
    }
  }
  .gouwuche {

    .weui-panel {
      margin-top: 5px;
    }
    .msg.weui-panel:before {
      border-top: none;

    }
    .bottom {
      background-color: #eee;
      display: flex;
      padding: 10px;
      position: fixed;
      bottom: 0;
      width: 100%;
      .input-cheakbox {
        top: 13px;
      }
      li {
        text-align: left;
        line-height: 40px;
      }
      :first-child {
        flex: 0 85px;
        font-size: 18px;
        color: #999;
        span {
          margin-right: 5px;
        }
        .all {
          position: relative;
          top: 3px;
        }
      }
      li:nth-child(2) {
        flex: 0 100px;
        color: #999;
        font-size: 12px;
        span {
          color: #fc8c4d;
          font-size: 18px;
          margin-left: 5px;
        }
      }
      :last-child {

        button {
          margin-left: 25px;
          background-image: linear-gradient(to left, #ff8551, #f9964e);
          color: #fff;
          height: 40px;
          line-height: 40px;
          border-radius: 25px;
          border: none;
          width: 130px;
        }
      }
    }
  }

  .gouwulist:last-child .content > div {
    border-bottom: none;
  }

  .gouwulist {
    margin-top: 10px;
  }

  .gouwulist .content > div {
    display: flex;
    position: relative;
    margin: 0 10px;
    border-bottom: 1px solid #ddd;
    p {
      flex: 0 50px;
      line-height: 100px;
    }
    .wv-number-spinner {
      position: absolute;
      bottom: 20px;
      right: 10px;
    }
  }

  .checkbox-custom {
    position: relative;
    display: inline-block;
  }

  .checkbox-custom input[type=checkbox] {
    z-index: 1;
    width: 25px;
    height: 25px;
    opacity: 0;
    cursor: pointer;
  }

  .checkbox-custom input[type=checkbox] {
    position: absolute;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    cursor: pointer;
    box-sizing: border-box;
  }

  .checkbox-custom label::before {
    display: inline-block;
    width: 25px;
    height: 25px;
    content: "";
    background: url("../../assets/radio.png") no-repeat;
    background-size: 100% 100%;
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
  }

  .checkbox-custom input[type=checkbox]:checked + label::after {
    content: "";
    background: url("../../assets/radiocheaked.png") no-repeat;
    background-size: 100% 100%;
  }

  .checkbox-custom label::after {
    cursor: pointer;
    display: inline-block;
    width: 25px;
    height: 25px;
    padding-top: 1px;
    margin-left: -25px;
    font-size: 12px;
    line-height: 20px;
    color: #76838f;
    text-align: center;
  }

  .checkbox-custom input[type=checkbox] {
    margin-top: 30px;
  }

  .bottom .checkbox-custom input[type=checkbox] {
    margin-top: 7px;
  }

  .bottom .checkbox-custom label::before {
    position: relative;
    top: 7px;
    margin-right: 5px;
  }

  .bottom .checkbox-custom input[type=checkbox]:checked + label::after {
    position: absolute;
    top: 7px;
    left: 24px;
  }
</style>
